<template>
	<view class="">
		<w-navbar :immersive="true" titleColor="black"></w-navbar>
		<w-container :isNavbar="false">
			<template>
				<view class="content">
					<view class="goods_img">
						<image :src="ossURL + goods_info.image" mode="widthFix"></image>
					</view>
					<view class="goods_content">
						<view class="goods_price">
							￥{{new_sku_list[0].price}}
						</view>
						<view class="goods_name">
							{{goods_info.title}}
						</view>
						<view class="goods_sn mb-20">
							货号：{{goods_info.goods_sn}}
						</view>
						<view class="goods_detail">
							{{goods_info.description}}
						</view>
					</view>
					<view class="" style="height: 120rpx;"></view>
				</view>
				
			</template>
		</w-container>
		<template>
			<view class="shopping_box fr-ac-jc">
				<view class="left fc-ac" @click="goShoppingCart">
					<image src="../../static/image/icon5.png" style="width: 50rpx;height: 50rpx;" mode="widthFix"></image>
					<!-- <view class="iconfont icon-gouwuche fs-20">
						
					</view> -->
					<view class="">
						购物车
					</view>
					<view v-if="cart_num" class="shopping_cart_num">
						{{cart_num}}
					</view>
				</view>
				
				<view @click="openCard" class="right fw">
					<view class="add">
						加入购物车
					</view>
					<view class="buy">
						立即购买
					</view>
				</view>
			</view>
		</template>
		<template>
			<u-popup :show="show_goods_card" @close="show_goods_card=false" :closeable="true">
				<view class="popup_box">
					<view class="goods_box fr">
						<view class="left">
							<image src="../../static/index/swiper1.jpg" mode=""></image>
						</view>
						<view class="right">
							<view class="goods_name">
								{{new_sku_choose.sku_name?new_sku_choose.sku_name:'请选择规格'}}
							</view>
							<!-- <view class="goods_detail">
								{{new_sku_choose.price?new_sku_choose.price:'请选择规格'}}
							</view> -->
							<view class="goods_price">
								{{new_sku_all_price}}
							</view>
						</view>
					</view>
					<view class="title_box fr-ac-jsb">
						<view class="text">
							规格
						</view>
					</view>
					<view class="gooods_size frw">
						<view @click="skuChoose(item)" :class="new_sku_choose.sku_id == item.sku_id?'check':''" class="gooods_size_item" v-for="(item,index) in new_sku_list" :key="index">
							{{item.sku_name}}
						</view>
					</view>
					
					<view class="" style="height: 300rpx;">
						
					</view>
					
					<view class="title_box fr-ac-jsb">
						<view class="text">
							数量
						</view>
						<u-number-box 
						    button-size="28"
						    color="#000"
						    bgColor="#ffffff"
						    iconStyle="color: #888"
							:step="1"
							integer
							v-model="new_sku_num"
						></u-number-box>
					</view>
					
					<view class="shopping fw">
						<view @click="addCart" class="add">
							加入购物车
						</view>
						<view @click="buyNow" class="buy">
							立即购买
						</view>
					</view>
				</view>
			</u-popup>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_id:'',
				goods_info:{},
				sku_list:[],
				
				new_sku_list:[],
				new_sku_choose:{},
				new_sku_num:1,
				
				show_goods_card:false,
				
				cart_num:0,
				
			}
		},
		watch: {
		
		},
		computed:{
			new_sku_all_price(){
				return '￥' + ( Number( this.new_sku_num ) * Number(this.new_sku_choose.price) ).toFixed(2)
			},
		},
		onLoad(options) {
			this.goods_id = options.goods_id || ''
			this.get_cart_nums()
			this.goods_id && this.get_goods_info()
		},
		onShow() {
		},
		methods: {
			async get_cart_nums() {
				const res = await this.$http({
					url: '/addons/shop/api.cart/cart_nums',
					data: {
						
					}
				})
				if (res.code == 1) {
					this.cart_num = res.data.cart_num
				}
			},
			async get_goods_info() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.goods/get_goods_info',
					data: {
						goods_id:this.goods_id
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.goods_info = res.data.goods_info
					this.sku_list = res.data.sku_list
					this.new_sku_list = res.data.new_sku_list
					this.new_sku_choose = this.new_sku_list[0]
				}
			},
			skuChoose(item){
				this.new_sku_choose = item
				this.new_sku_num = 1
			},
			goShoppingCart(){
				uni.navigateTo({
					url:'/pages/goods/shopping_cart'
				})
			},
			openCard(){
				this.show_goods_card = true
			},
			addCart(){
				this.placeOrder(1)
			},
			buyNow(){
				this.placeOrder(2)
			},
			async placeOrder(sceneval) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.cart/add',
					data: {
						goods_id:this.goods_info.id,
						goods_sku_id: this.new_sku_choose.sku_id,
						sceneval: sceneval,
						nums: this.new_sku_num,
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					sceneval == 1 && this.get_cart_nums()
					sceneval == 2 && uni.navigateTo({
						url: `/pages/goods/balance?ids=${res.data}&sceneval=${sceneval}`
					})
				}
				uni.hideLoading()
			},
			
		}
			
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: white;
		padding: 0 20rpx;
		
		.goods_img{
			width: 100%;
			image{
				width: 100%;
			}
		}
		
		.goods_content{
			
			
			.goods_price{
				margin: 30rpx 0;
				color: red;
				font-size: 44rpx;
				font-weight: bold;
			}
			
			.goods_name{
				margin: 20rpx 0;
				font-size: 32rpx;
				font-weight: bold;
			}
			
			.goods_sn{
				color: #888;
			}
			
			.goods_detail{
				color: #ccc;
			}
		}
	}
	
	
	.shopping_box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 100rpx;
		padding: 0 0 30rpx 0;
		background-color: white;
		
		
		.left{
			position: relative;
			margin: 0 30rpx;
			
			view{
				color: #888;
			}
			.shopping_cart_num{
				position: absolute;
				top: -20rpx;
				right: -10rpx;
				background-color: $theme-color;
				border-radius: 50%;
				width: 36rpx;
				height: 36rpx;
				color: white;
				text-align: center;
				line-height: 36rpx;
				font-size: 24rpx;
				z-index: 99;
			}
		}
		
		.right{
			width: 70vw;
			height: 70rpx;
			
			.add,.buy{
				flex: 1;
				line-height: 70rpx;
				color: white;
				text-align: center;
			}
			
			.add{
				background-color: black;
				
			}
			
			.buy{
				background-color: $theme-color;
			}
		}
	}
	
	.popup_box{
		box-sizing: border-box;
		padding: 40rpx 30rpx;
		background-color: white;
		
		
		.goods_box{
			width: 100%;
			height: 200rpx;
			
			.left{
				min-height: 200rpx;
				min-width: 200rpx;
				
				image{
					width: 200rpx;
					height: 200rpx;
				}
				
			}
			
			.right{
				margin-left: 20rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.goods_price{
					color: red;
					font-size: 40rpx;
					font-weight: bold;
				}
				
				.goods_name{
					font-weight: bold;
				}
				
				.goods_detail{
					color: #ccc;
				}
			}
		}
		
		.gooods_size{
			
			.gooods_size_item{
				width: 21%;
				margin: 10rpx 2%;
				padding: 8rpx 0;
				background-color: #eee;
				text-align: center;
			}
			
			.check{
				background-color: $theme-color;
				color: white;
			}
		}
		
		.title_box{
			margin: 30rpx 0;
			
			.text{
				
			}
		}
		.shopping{
			width: 100%;
			height: 70rpx;
			
			.add,.buy{
				flex: 1;
				line-height: 70rpx;
				color: white;
				text-align: center;
			}
			
			.add{
				background-color: black;
				
			}
			
			.buy{
				background-color: $theme-color;
			}
		}
	}
</style>